<template>
    <el-form :model="form" label-width="80px" class="form-container">
    <el-row :gutter="20">
      <!-- 学院名称 -->
      <!-- <el-col :span="6">
        <el-form-item label="学院名称">
          <el-select v-model="form.college" filterable clearable placeholder="请选择学院名称">
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-col> -->

      <!-- 专业名称 -->
      <el-col :span="6">
        <el-form-item label="专业名称">
          <el-select v-model="form.major" filterable clearable placeholder="请选择专业名称">
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-col>

      <!-- 模版类型 -->
      <el-col :span="6">
        <el-form-item label="模版类型">
          <el-select v-model="form.major" filterable clearable placeholder="请选择模版类型">
            <el-option
              v-for="item in options3"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-col>

      <!-- 操作按钮 -->
      <el-col :span="6" class="btn-wrap">
        <el-form-item label=" ">
          <el-button type="primary" @click="onSearch">搜索</el-button>
          <el-button @click="onReset">重置</el-button>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
      <!-- 提示信息 -->
    <el-alert
      v-if="alert.visible"
      :title="alert.message"
      :type="alert.type"
      show-icon
      closable
      class="alert-msg"
      @close="alert.visible = false"
    />

    <div class="all">
        <el-table
            :data="tableData"
            style="width: 100%"
            height="450"
            >
            
            <el-table-column prop="templateName" label="模版名称" width="200">
              <template #default="{ row }">
                <a :href="row.path" download style="color:#409EFF; text-decoration:none;">
                  {{ row.templateName }}
                </a>
              </template>
            </el-table-column>
            <el-table-column
            prop="templateOfMajor"
            label="模版所属专业"
            >
            </el-table-column>
            <el-table-column
            prop="templateCollege"
            label="模版所属学院"
            >
            </el-table-column>
            <el-table-column
            prop="templateType"
            label="模版类型"
            >
            </el-table-column>
            <el-table-column
            prop="time"
            label="上传时间"
            >
            </el-table-column>
            <el-table-column
            prop="status"
            label="启用状态"
            >
              <template #default="{ row }">
                <el-switch
                v-model="row.status"
                active-color="#13ce66"
                inactive-color="#ff4949"
                />
            </template>
            </el-table-column>
            <el-table-column
            prop="username"
            label="上传用户"
            >
            </el-table-column>
            <!-- <el-table-column
            prop="zishu"
            label="论文总字数"
            >
            </el-table-column>
            <el-table-column
            prop="zhangshu"
            label="正文章节数量"
            >
            </el-table-column>
            <el-table-column
            prop="conference"
            label="参考文献数量"
            >
            </el-table-column>
            <el-table-column
            prop="three"
            label="近三年文献占比"
            >
            </el-table-column>
            <el-table-column
            prop="five"
            label="近五年文献占比"
            >
            </el-table-column>
            <el-table-column
            prop="English"
            label="英文文献数量"
            >
            </el-table-column> -->
          <el-table-column label="操作" width="160" align="center">
            <template #default="scope">
              <el-button type="text" @click="openDialog('score', scope.row)">评分参数</el-button>
              <el-button type="text" @click="openDialog('chapter', scope.row)">章节列表</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 弹窗 -->
        <el-dialog v-model="dialogVisible" :title="dialogTitle" width="500px">
          <!-- 根据类型展示不同内容 -->
          <div v-if="dialogType === 'score'">
            <el-table :data="scoreList" style="width: 100%">
              <el-table-column prop="parameter" label="参数" align="center" />
              <el-table-column prop="value" label="值" align="center" />
            </el-table>
          </div>

          <div v-else-if="dialogType === 'chapter'">
            <el-table :data="chapterList" style="width: 100%">
              <el-table-column prop="chapter" label="章节" align="center" />
              <el-table-column prop="title" label="标题" align="center" />
            </el-table>
          </div>

          <template #footer>
            <span class="dialog-footer">
              <el-button @click="dialogVisible = false">关闭</el-button>
            </span>
          </template>
        </el-dialog>
    </div>
    <div class="block">
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400">
        </el-pagination>
    </div>
</template>

<script setup>
import { reactive, ref } from 'vue'

// ------------------ 表单 ------------------
const form = reactive({
  college: '',
  major: '',
  templateType: '',
})

// 下拉框选项
const options2 = [
  { value: 'a', label: '物理学' },
  { value: 'b', label: '汉语言文学' },
  { value: 'c', label: '机械工程' }
]
const options3 = [
  { value: 'a', label: '毕业论文' },
  { value: 'b', label: '毕业设计说明书' },
  { value: 'c', label: '其他' }
]



// ------------------ 提示信息 ------------------
const alert = reactive({
  visible: false,
  message: '',
  type: 'info' // 默认值，避免 undefined
})

const onSearch = () => {
  if (form.major && form.templateType) {
    alert.message = '搜索成功！'
    alert.type = 'success'
  } else {
    alert.message = '请填写所有字段后再搜索！'
    alert.type = 'error'
  }
  alert.visible = true
}

const onReset = () => {
  form.college = ''
  form.major = ''
  form.templateType = ''
  alert.visible = false
}
// ------------------ 表格数据 ------------------

// ------------------ 弹窗状态 ------------------
const dialogVisible = ref(false)
const dialogType = ref('')
const dialogTitle = ref('')

const tableData = ref([
  {
    templateName: '工科论文模版A',
    path:"/前端技术文档.docx",
    templateOfMajor: '机械工程',
    templateCollege: '工程学院',
    templateType: '毕业设计说明书',
    time: '2025-07-01',
    status: true,
    username: 'admin01',
    scoreList: [
      { parameter: '论文总字数', value: '10500' },
      { parameter: '章节数', value: '8' },
      { parameter: '参考文献数', value: '20' },
      { parameter: '近三年文献占比', value: '65%' },
      { parameter: '近五年文献占比', value: '85%' },
      { parameter: '英文文献数量', value: '6' },
    ],
    chapterList: [
      { chapter: '第1章', title: '绪论' },
      { chapter: '第2章', title: '机械基础' },
      { chapter: '第3章', title: '实验与结果' },
    ]
  },
  {
    templateName: '文科论文模版B',
    templateOfMajor: '汉语言文学',
    templateCollege: '人文学院',
    templateType: '毕业论文',
    time: '2025-06-15',
    status: false,
    username: 'user02',
    scoreList: [
      { parameter: '论文总字数', value: '9500' },
      { parameter: '章节数', value: '6' },
      { parameter: '参考文献数', value: '18' },
      { parameter: '近三年文献占比', value: '55%' },
      { parameter: '近五年文献占比', value: '78%' },
      { parameter: '英文文献数量', value: '3' },
    ],
    chapterList: [
      { chapter: '第1章', title: '绪论' },
      { chapter: '第2章', title: '古代文学回顾' },
      { chapter: '第3章', title: '现当代文学分析' },
    ]
  },
  {
    templateName: '理科论文模版C',
    templateOfMajor: '物理学',
    templateCollege: '理学院',
    templateType: '其他',
    time: '2025-07-10',
    status: false,
    username: 'editor03',
    scoreList: [
      { parameter: '论文总字数', value: '12000' },
      { parameter: '章节数', value: '10' },
      { parameter: '参考文献数', value: '25' },
      { parameter: '近三年文献占比', value: '72%' },
      { parameter: '近五年文献占比', value: '91%' },
      { parameter: '英文文献数量', value: '8' },
    ],
    chapterList: [
      { chapter: '第1章', title: '绪论' },
      { chapter: '第2章', title: '量子力学基础' },
      { chapter: '第3章', title: '实验与计算' },
    ]
  }
])


// 当前行的列表数据
const scoreList = ref([])
const chapterList = ref([])

// 打开弹窗
const openDialog = (type, row) => {
  // 弹窗状态
  dialogType.value = type
  dialogVisible.value = true
  dialogTitle.value = type === 'score'
    ? `评分参数 - ${row.templateName}`
    : `章节列表 - ${row.templateName}`

  // 动态赋值
  scoreList.value = row.scoreList
  chapterList.value = row.chapterList
}
// ------------------ 分页 ------------------
const currentPage4 = ref(1)
const handleSizeChange = (val) => {
  console.log(`每页 ${val} 条`)
}
const handleCurrentChange = (val) => {
  console.log(`当前页: ${val}`)
}
</script>


<style scoped>

.all{
    margin-top: 40px;
    
    margin-left: 20px;
    margin-right: 20px;
}
.lab{
    width: 65px;
}
.two{
    display: flex;
    margin: 30px;
    gap: 5px;
}
.select{
    width: 250px;
}
.input{
    width: 250px;
}
.block{
    display: flex;
    justify-content: flex-end;
    margin: 20px;
}
.button1{
    width: 70px;
    background-color: #ff3838;
    border: #ff3838;
    margin-left: 10px;
}
.button2{
    width: 70px;
    margin-left: 10px;
}
.form-container{
  margin-top: 20px;
}
</style>
